<template>
  <div class="trip-planner">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">生成行程</h1>
        <p class="page-subtitle">AI智能规划，让你的旅行更精彩</p>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <!-- 行程规划表单 -->
        <div class="col-lg-8">
          <div class="planner-card">
            <div class="card-header">
              <h3><i class="bi bi-magic"></i> 智能行程规划</h3>
              <p>告诉我们你的需求，我们为你量身定制完美行程</p>
            </div>
            
            <div class="planner-form">
              <el-form :model="planForm" label-width="120px" size="large">
                <el-form-item label="目的地">
                  <el-select
                    v-model="planForm.destination"
                    placeholder="选择你要去的城市"
                    filterable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="city in cities"
                      :key="city"
                      :label="city"
                      :value="city"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="出行时间">
                  <el-date-picker
                    v-model="planForm.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 100%"
                  />
                </el-form-item>

                <el-form-item label="出行人数">
                  <el-input-number
                    v-model="planForm.peopleCount"
                    :min="1"
                    :max="20"
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>

                <el-form-item label="预算范围">
                  <el-select v-model="planForm.budget" placeholder="选择预算范围" style="width: 100%">
                    <el-option label="经济型 (1000元以下)" value="budget" />
                    <el-option label="舒适型 (1000-3000元)" value="comfort" />
                    <el-option label="豪华型 (3000-8000元)" value="luxury" />
                    <el-option label="顶级型 (8000元以上)" value="premium" />
                  </el-select>
                </el-form-item>

                <el-form-item label="旅行类型">
                  <el-checkbox-group v-model="planForm.travelTypes">
                    <el-checkbox label="文化历史">文化历史</el-checkbox>
                    <el-checkbox label="自然风光">自然风光</el-checkbox>
                    <el-checkbox label="美食体验">美食体验</el-checkbox>
                    <el-checkbox label="购物娱乐">购物娱乐</el-checkbox>
                    <el-checkbox label="摄影打卡">摄影打卡</el-checkbox>
                    <el-checkbox label="亲子游">亲子游</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>

                <el-form-item label="交通方式">
                  <el-radio-group v-model="planForm.transportation">
                    <el-radio label="public">公共交通</el-radio>
                    <el-radio label="private">自驾游</el-radio>
                    <el-radio label="mixed">混合方式</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="住宿偏好">
                  <el-select v-model="planForm.accommodation" placeholder="选择住宿类型" style="width: 100%">
                    <el-option label="经济型酒店" value="budget-hotel" />
                    <el-option label="商务酒店" value="business-hotel" />
                    <el-option label="度假酒店" value="resort" />
                    <el-option label="精品民宿" value="boutique" />
                    <el-option label="青年旅舍" value="hostel" />
                  </el-select>
                </el-form-item>

                <el-form-item label="特殊需求">
                  <el-input
                    v-model="planForm.specialRequests"
                    type="textarea"
                    :rows="3"
                    placeholder="如：无障碍设施、素食餐厅、特殊节日等"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button 
                    type="primary" 
                    size="large" 
                    @click="generateItinerary"
                    :loading="generating"
                    style="width: 100%"
                  >
                    <el-icon><MagicStick /></el-icon>
                    {{ generating ? '正在生成中...' : '生成专属行程' }}
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 生成的行程 -->
          <div v-if="generatedItinerary" class="itinerary-result">
            <div class="result-header">
              <h3><i class="bi bi-calendar-check"></i> 为你定制的行程</h3>
              <div class="result-actions">
                <el-button @click="saveItinerary">保存行程</el-button>
                <el-button @click="shareItinerary">分享行程</el-button>
                <el-button type="primary" @click="exportItinerary">导出PDF</el-button>
              </div>
            </div>

            <div class="itinerary-overview">
              <div class="overview-item">
                <i class="bi bi-calendar3"></i>
                <span>{{ getDayCount() }}天{{ getDayCount() - 1 }}夜</span>
              </div>
              <div class="overview-item">
                <i class="bi bi-geo-alt"></i>
                <span>{{ planForm.destination }}</span>
              </div>
              <div class="overview-item">
                <i class="bi bi-people"></i>
                <span>{{ planForm.peopleCount }}人出行</span>
              </div>
              <div class="overview-item">
                <i class="bi bi-currency-dollar"></i>
                <span>预估费用：{{ generatedItinerary.estimatedCost }}元/人</span>
              </div>
            </div>

            <div class="daily-itinerary">
              <div
                v-for="(day, index) in generatedItinerary.days"
                :key="index"
                class="day-card"
              >
                <div class="day-header">
                  <h4>第{{ index + 1 }}天</h4>
                  <span class="day-date">{{ formatDate(day.date) }}</span>
                </div>
                
                <div class="day-timeline">
                  <div
                    v-for="(activity, actIndex) in day.activities"
                    :key="actIndex"
                    class="activity-item"
                  >
                    <div class="activity-time">{{ activity.time }}</div>
                    <div class="activity-content">
                      <h5 class="activity-title">{{ activity.title }}</h5>
                      <p class="activity-desc">{{ activity.description }}</p>
                      <div class="activity-meta">
                        <span v-if="activity.duration" class="meta-item">
                          <i class="bi bi-clock"></i> {{ activity.duration }}
                        </span>
                        <span v-if="activity.cost" class="meta-item">
                          <i class="bi bi-currency-dollar"></i> {{ activity.cost }}元
                        </span>
                        <span v-if="activity.transportation" class="meta-item">
                          <i class="bi bi-bus-front"></i> {{ activity.transportation }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
          <div class="sidebar">
            <!-- 热门目的地 -->
            <div class="sidebar-card">
              <h4 class="card-title">
                <i class="bi bi-fire"></i> 热门目的地
              </h4>
              <div class="popular-destinations">
                <div
                  v-for="dest in popularDestinations"
                  :key="dest.name"
                  class="dest-item"
                  @click="selectDestination(dest.name)"
                >
                  <img :src="dest.image" :alt="dest.name" />
                  <div class="dest-info">
                    <h5>{{ dest.name }}</h5>
                    <p>{{ dest.description }}</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 旅行小贴士 -->
            <div class="sidebar-card">
              <h4 class="card-title">
                <i class="bi bi-lightbulb"></i> 旅行小贴士
              </h4>
              <div class="tips-list">
                <div v-for="tip in travelTips" :key="tip.id" class="tip-item">
                  <i class="bi bi-check-circle-fill"></i>
                  <span>{{ tip.content }}</span>
                </div>
              </div>
            </div>

            <!-- 历史记录 -->
            <div class="sidebar-card">
              <h4 class="card-title">
                <i class="bi bi-clock-history"></i> 历史行程
              </h4>
              <div class="history-list">
                <div
                  v-for="history in historyItineraries"
                  :key="history.id"
                  class="history-item"
                  @click="loadHistoryItinerary(history)"
                >
                  <div class="history-title">{{ history.destination }}</div>
                  <div class="history-date">{{ formatDate(history.createTime) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { 
  ElForm, ElFormItem, ElSelect, ElOption, ElDatePicker, ElInputNumber,
  ElCheckboxGroup, ElCheckbox, ElRadioGroup, ElRadio, ElInput, ElButton,
  ElIcon, ElMessage
} from 'element-plus'
import { images } from '@/assets/images'
import { MagicStick } from '@element-plus/icons-vue'

// 表单数据
const planForm = reactive({
  destination: '',
  dateRange: [],
  peopleCount: 2,
  budget: '',
  travelTypes: [],
  transportation: 'public',
  accommodation: '',
  specialRequests: ''
})

// 状态管理
const generating = ref(false)
const generatedItinerary = ref(null)

// 城市列表
const cities = ref([
  '北京', '上海', '广州', '深圳', '成都', '重庆', '西安', '杭州', 
  '南京', '武汉', '天津', '苏州', '长沙', '郑州', '青岛', '大连',
  '厦门', '昆明', '贵阳', '兰州', '呼和浩特', '银川', '西宁', '拉萨',
  '乌鲁木齐', '三亚', '桂林', '丽江', '张家界', '九寨沟'
])

// 热门目的地
const popularDestinations = ref([
  {
    name: '北京',
    description: '千年古都，文化之旅',
    image: images.img20221106190735
  },
  {
    name: '三亚',
    description: '海岛风情，度假天堂',
    image: images.img90
  },
  {
    name: '成都',
    description: '悠闲慢生活，美食之都',
    image: images.img980
  }
])

// 旅行小贴士
const travelTips = ref([
  { id: 1, content: '提前规划行程，预订住宿和交通' },
  { id: 2, content: '准备必要的证件和药品' },
  { id: 3, content: '关注天气变化，合理安排行程' },
  { id: 4, content: '尊重当地文化和习俗' },
  { id: 5, content: '保持通讯畅通，告知家人行程' }
])

// 历史行程
const historyItineraries = ref([
  {
    id: 1,
    destination: '北京5日游',
    createTime: '2024-01-15'
  },
  {
    id: 2,
    destination: '三亚3日游',
    createTime: '2024-01-10'
  }
])

// 选择目的地
const selectDestination = (destination: string) => {
  planForm.destination = destination
}

// 生成行程
const generateItinerary = async () => {
  if (!planForm.destination || !planForm.dateRange.length) {
    ElMessage.warning('请选择目的地和出行时间')
    return
  }

  generating.value = true
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 3000))
    
    // 生成模拟行程数据
    const days = getDayCount()
    const mockItinerary = {
      destination: planForm.destination,
      days: Array.from({ length: days }, (_, dayIndex) => ({
        date: new Date(planForm.dateRange[0].getTime() + dayIndex * 24 * 60 * 60 * 1000),
        activities: [
          {
            time: '09:00',
            title: `${planForm.destination}必游景点${dayIndex + 1}`,
            description: '探索当地最具代表性的景点，感受独特的文化魅力',
            duration: '2小时',
            cost: '80',
            transportation: '地铁'
          },
          {
            time: '12:00',
            title: '当地特色美食',
            description: '品尝正宗的当地美食，体验地道的饮食文化',
            duration: '1小时',
            cost: '120',
            transportation: ''
          },
          {
            time: '14:00',
            title: `文化体验活动${dayIndex + 1}`,
            description: '参与当地特色活动，深度了解当地文化',
            duration: '3小时',
            cost: '150',
            transportation: '公交'
          }
        ]
      })),
      estimatedCost: 2500
    }
    
    generatedItinerary.value = mockItinerary
    ElMessage.success('行程生成成功！')
  } catch (error) {
    ElMessage.error('生成行程失败，请稍后重试')
  } finally {
    generating.value = false
  }
}

// 获取天数
const getDayCount = () => {
  if (!planForm.dateRange.length) return 0
  const start = new Date(planForm.dateRange[0])
  const end = new Date(planForm.dateRange[1])
  return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)) + 1
}

// 格式化日期
const formatDate = (date: string | Date) => {
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN', {
    month: 'short',
    day: 'numeric',
    weekday: 'short'
  })
}

// 保存行程
const saveItinerary = () => {
  ElMessage.success('行程已保存到个人中心')
}

// 分享行程
const shareItinerary = () => {
  ElMessage.info('分享功能开发中...')
}

// 导出PDF
const exportItinerary = () => {
  ElMessage.info('PDF导出功能开发中...')
}

// 加载历史行程
const loadHistoryItinerary = (history: any) => {
  ElMessage.info(`加载${history.destination}行程...`)
}
</script>

<style scoped>
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0;
}

.planner-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  text-align: center;
}

.card-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.card-header p {
  opacity: 0.9;
  margin: 0;
}

.planner-form {
  padding: 30px;
}

.itinerary-result {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.result-header {
  background: linear-gradient(135667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-actions {
  display: flex;
  gap: 10px;
}

.itinerary-overview {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.overview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.overview-item i {
  color: #667eea;
}

.daily-itinerary {
  padding: 20px;
}

.day-card {
  margin-bottom: 30px;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}

.day-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.day-header h4 {
  margin: 0;
  color: #333;
}

.day-date {
  color: #666;
  font-size: 14px;
}

.day-timeline {
  padding: 20px;
}

.activity-item {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.activity-time {
  min-width: 60px;
  font-weight: 600;
  color: #667eea;
  font-size: 14px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.activity-desc {
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.activity-meta {
  display: flex;
  gap: 15px;
  font-size: 13px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #888;
}

.meta-item i {
  color: #667eea;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title i {
  color: #667eea;
}

.popular-destinations {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dest-item {
  display: flex;
  gap: 12px;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s;
}

.dest-item:hover {
  background: #f8f9fa;
}

.dest-item img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.dest-info h5 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 14px;
}

.dest-info p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}

.tip-item i {
  color: #28a745;
  font-size: 12px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.history-item:hover {
  background: #f8f9fa;
  border-color: #667eea;
}

.history-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.history-date {
  font-size: 12px;
  color: #999;
}

@media (max-width: 768px) {
  .page-header {
    padding: 40px 0;
  }
  
  .page-title {
    font-size: 2.2rem;
  }
  
  .card-header,
  .planner-form {
    padding: 20px;
  }
  
  .result-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .itinerary-overview {
    flex-direction: column;
    gap: 15px;
  }
  
  .sidebar {
    margin-top: 30px;
  }
}
</style>


